<template>
  <div class="contain">
    <h1>最近的连接</h1>
    <el-row>
      <el-button type="danger" plain @click="clearAll">删除所有连接</el-button>
      <el-button type="danger" plain @click="deleteSelection">删除连接</el-button>
    </el-row>
    <el-row>
      <el-table
          ref="multipleTable"
          :data="recentConnectionList"
          tooltip-effect="dark">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="uri" label="URI">
        </el-table-column>
        <el-table-column prop="updateTime" label="时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button class="button_margin_clear" @click="openConnection(scope.row)" type="text" size="small">
              打开连接
            </el-button>
            <el-button class="button_margin_clear" @click="copyConnectionString(scope.row)" type="text" size="small">
              复制连接字符串
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import {getAllRecentConnectList, removeAllRecentConnect, removeRecentConnects} from "@/api/recentConnect";

export default {
  name: "Recent",
  data() {
    return {
      recentConnectionList: [],
    }
  },
  mounted() {
    if (this.$store.getters.getToken === null) {
      this.$router.push('/newConnection')
    } else {
      this.getRecentConnectList()
    }
  },
  methods: {
    getRecentConnectList() {
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        getAllRecentConnectList().then(res => {
          this.recentConnectionList = res.data
          this.recentConnectionList.forEach(connect => {
            if (connect.auth) {
              connect.uri = connect.protocol + '://' + connect.username + ':******@' + connect.ip + ':' + connect.port + '/?authMechanism=' + connect.authMechanism + '&authSource=' + connect.authDatabase
            } else {
              connect.uri = connect.protocol + "://" + connect.ip + ":" + connect.port + "/"
            }
          })
        }).catch(() => {
          this.$router.push('/')
        })
      }, 1000);
    },
    clearAll() {
      const loading = this.$loading({
        lock: true,
        text: '删除中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        removeAllRecentConnect().then(() => {
          this.$message.success("成功删除所有连接！")
          this.getRecentConnectList();
        }).catch(() => {
          this.$message.error("删除所有连接失败！")
        })
        loading.close();
      }, 1000);
    },
    deleteSelection() {
      let selection = this.$refs.multipleTable.selection
      if (selection.length < 1) {
        this.$message({
          message: '请选择要删除的连接！',
          type: 'error'
        });
      } else {
        let ids = []
        selection.forEach(item => {
          ids.push(item.id)
        })
        const loading = this.$loading({
          lock: true,
          text: '删除中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          removeRecentConnects(ids).then(() => {
            this.$message.success("成功删除连接！")
            this.getRecentConnectList();
          }).catch(() => {
            this.$message.error("删除连接失败！")
          })
        }, 1000);
      }
    },
    openConnection(row) {
      const loading = this.$loading({
        lock: true,
        text: '连接中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        row.id = null
        let data = JSON.parse(JSON.stringify(row))
        this.$store.dispatch("Connect", data).then(() => {
          this.$router.push({path: "/connection"})
        }).catch(() => {
          this.$message.error("连接失败！")
        })
      }, 1000);
    },
    copyConnectionString(row) {
      navigator.clipboard.writeText(row.uri).then(() => {
        this.$message.success('Copy成功！')
      })
    },
  }
}
</script>

<style scoped>
.contain {
  padding: 20px;
}
</style>
